
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Slider for Bootstrap, from Twitter</title>
        <link href="../../../framework/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="css/slider.css" rel="stylesheet">
        <style>
            .container {
                background: #fff;
            }
            #alert {
                display: none;
            }
            #sl2 {
                width: 400px;
            }
            #RGB {
                height: 20px;
                background: rgb(128, 128, 128);
            }
            #RC .slider-selection {
                background: #FF8282;
            }
            #RC .slider-handle {
                background: red;
            }
            #GC .slider-selection {
                background: #428041;
            }
            #GC .slider-handle {
                background: green;
            }
            #BC .slider-selection {
                background: #8283FF;
            }
            #BC .slider-handle {
                border-bottom-color: blue;
            }
            #R, #G, #B {
                width: 300px;
            }
            #eg .slider-selection {
                background: #BABABA;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="span9 columns">
                <h2>Example</h2>
                <p>Basic example with custom formater</p>
                <div class="well">
                    <input type="text" class="span2" value="4" id="sl1" >
                </div>
                <p>Range selector, options specified via data attribute.</p>
                <div class="well">
                    Filter by price interval: <b>€ 10</b> <input type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[250,450]" id="sl2" > <b>€ 1000</b>
                </div>
                <p>Using events to work with the values and style the selection and handles via CSS. The tooltip is disabled and diferent shapes for the handles</p>
                <div class="well">
                    <p>
                        <b>R</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="R" data-slider-tooltip="hide" data-slider-handle="square" >
                    </p>
                    <p>
                        <b>G</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" >
                    </p>
                    <p>
                        <b>B</b> <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" >
                    </p>
                    <div id="RGB"></div>
                </div>
                <p>Vertical sliders</p>
                <div class="well">
                    <table id="eg">
                        <tbody>
                            <tr>
                                <td>
                                    <input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-13" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="hide">
                                </td>
                                <td>
                                    <input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-11" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="hide">
                                </td>
                                <td>
                                    <input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-6" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="hide">
                                </td>
                                <td>
                                    <input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-4" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="hide">
                                </td>
                                <td>
                                    <input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-6" data-slider-orientation="vertical" data-slider-selection="after" data-slider-tooltip="hide">
                                </td>
                                <td>
                                    <input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-11" data-slider-orientation="vertical" data-slider-selection="after"data-slider-tooltip="hide">
                                </td>
                                <td>
                                    <input type="text" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after"data-slider-tooltip="hide">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <hr>
                <h2>Using bootstrap-slider.js</h2>
                <p>Call the slider via javascript:</p>
                <pre class="prettyprint linenums">$('.slider').slider()</pre>
                <h3>Options</h3>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="width: 100px;">Name</th>
                            <th style="width: 50px;">type</th>
                            <th style="width: 100px;">default</th>
                            <th>description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>min</td>
                            <td>float</td>
                            <td>0</td>
                            <td>minimum possible value</td>
                        </tr>
                        <tr>
                            <td>max</td>
                            <td>float</td>
                            <td>10</td>
                            <td>maximum possible value</td>
                        </tr>
                        <tr>
                            <td>step</td>
                            <td>float</td>
                            <td>1</td>
                            <td>increment step</td>
                        </tr>
                        <tr>
                            <td>orientation</td>
                            <td>string</td>
                            <td>'horizontal'</td>
                            <td>set the orientation. Accepts 'vertical' or 'horizontal'</td>
                        </tr>
                        <tr>
                            <td>value</td>
                            <td>float|array</td>
                            <td>5</td>
                            <td>initial value. Use array to have a range slider.</td>
                        </tr>
                        <tr>
                            <td>selection</td>
                            <td>string</td>
                            <td>'before'</td>
                            <td>selection plament. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles</td>
                        </tr>
                        <tr>
                            <td>tooltip</td>
                            <td>string</td>
                            <td>'show'</td>
                            <td>whatever to show or hide the tooltip. Accepts: 'show' or 'hide'</td>
                        </tr>
                        <tr>
                            <td>handle</td>
                            <td>string</td>
                            <td>'round'</td>
                            <td>handle shape. Accepts: 'round', 'square' or 'triangle'</td>
                        </tr>
                        <tr>
                            <td>formater</td>
                            <td>function</td>
                            <td>returns the plain value</td>
                            <td>formater callback. Return the value wanted to be displayed in the tooltip</td>
                        </tr>
                    </tbody>
                </table>

                <h3>Markup</h3>
                <p>You can use data attributes to set up the configuration.</p>
                <pre class="prettyprint linenums">
&lt;input type=&quot;text&quot; class=&quot;span2&quot; value=&quot;&quot; data-slider-min=&quot;-20&quot; data-slider-max=&quot;20&quot; data-slider-step=&quot;1&quot; data-slider-value=&quot;-14&quot; data-slider-orientation=&quot;vertical&quot; data-slider-selection=&quot;after&quot;data-slider-tooltip=&quot;hide&quot;&gt;
                </pre>
                <h3>Methods</h3>
                <h4>.slider(options)</h4>
                <p>Initializes a slider.</p>
                <h4>.slider('getValue')</h4>
                <p>Get the value.</p>
                <h4>.slider('setValue', value)</h4>
                <p>Set a new value.</p>

                <h3>Events</h3>
                <p>Slider class exposes a few events for manipulating the value.</p>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="width: 150px;">Event</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>slideStart</td>
                            <td>This event fires when a dragging starts.</td>
                        </tr>
                        <tr>
                            <td>slide</td>
                            <td>This event is fired when the slider is dragged.</td>
                        </tr>
                        <tr>
                            <td>slideStop</td>
                            <td>This event is fired when a dragging stops.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <script src="../../jquery/jquery-2.2.3.min.js"></script>
        <script src="js/bootstrap-slider.js"></script>
        <script>
            $(function () {

                $('#sl1').slider({
                    formater: function (value) {
                        return 'Current value: ' + value;
                    }
                });
                $('#sl2').slider();

                var RGBChange = function () {
                    $('#RGB').css('background', 'rgb(' + r.getValue() + ',' + g.getValue() + ',' + b.getValue() + ')')
                };

                var r = $('#R').slider()
                        .on('slide', RGBChange)
                        .data('slider');
                var g = $('#G').slider()
                        .on('slide', RGBChange)
                        .data('slider');
                var b = $('#B').slider()
                        .on('slide', RGBChange)
                        .data('slider');

                $('#eg input').slider();
            });
        </script>
    </body>
</html>